<html>
    <head>
        <title>动态组件</title>
    </head>
    <body>
        <script>
            // 动态组件
                    /*
                        如何缓存动态组件的失活状态中的内容？

                            <keep-alive> !!

                    */

                    // 一、在动态组件上使用 keep-alive
                            /*
                                我们之前在一个多标签的界面中使用 "is" 标签属性来切换不同的组件：

                                    <component v-bind:is="currentTabComponent"> </component>

                                当在这些组件之间切换的时候，你有时候会想保持这些组件的状态，一避免反复重新渲染导致的性能问题。
                                (例如，标签页中每一页中的表单数据)
                                

                            */
                            /*
                                例如，我们来展开说一说这个多标签页界面：

                                你会注意到，如果你选择了一篇文章，切换到Archive标签，然后再切换回Posts，是不会继续展示你之前选择的文章的。
                                这是因为你每次切换新标签的时候，Vue都创建了一个新的currentTabComponent实例。

                                重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次创建的时候缓存下来。
                                为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。】


                                    ---失活的组件将会被缓存!---
                                    <keep-alive>
                                        <component v-bind:is="currentTabComponent"></component>
                                    </keep-alive>

                                现在，这里的Posts标签页中的组件保持了它们的状态(被选中的文章)甚至当它"未被渲染"时也是如此。
                            */
        </script>
    </body>
</html>